
<template>
    <div>
        <Row>
            <Col span="4"><h1>剩余服务</h1></Col>
            <Col span="13"><Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon>导出表格数据</Button></Col> 
            <Col span="1"><Button type="primary" size="large" @click="totalClick">全部</Button></Col>
            <Col span="6">
                <Input v-model="search">
                    <Select v-model="select2" slot="prepend" style="width: 80px">
                        <Option value="name">姓名</Option>
                        <Option value="p_num">手机号</Option>
                        <Option value="uid">编号</Option>
                        <Option value="sid">服务号</Option>
                    </Select>
                    <Button slot="append" icon="ios-search" @click="findOne"></Button>
                </Input>
            </Col>   
        </Row>  
        <Table :columns="columns1" :data="data1" ref=table></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changePage"></Page>
            </div>
        </div>
        <Modal
            v-model="modal3"
            title="转赠"
            @on-ok="ok">
            <Select
                v-model="select1"
                filterable>
                <Option v-for="option in server" :value="option.value" :key="option.value">{{option.label}}</Option>            
            </Select>
            <Input v-model="num" placeholder="输入数量"/>        
            <Input v-model="des" placeholder="转赠描述"/>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pageSize:12,
            dataCount:0,
            select2:"name",
            search:"",
            historyDate:[],
            index:'',
            modal3:false,
            select1:'',
            des:'',
            num:'',
            server:[],
            columns1: [
                {
                    title: "会员姓名",
                    key: "name"
                },
                {
                    title: "手机号",
                    key: "p_num"
                },
                {
                    title: "服务名称",
                    key: "cname"
                },
                {
                    title: "icon",
                    key: "icon_url",
                    render: (h, params) => {
                        return h('div', {
                            attrs: {
                                style: 'width: 60px;height: 60px;'
                            },                    
                        }, 
                        [
                            h('img', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                attrs: {
                                    src: params.row.icon_url, style: 'width: 60px;height: 60px;border-radius: 2px;'
                                },
                                style: {
                                },
                                
                            }),
                        ]);
                    }
                },
                {
                    title: "数量",
                    key: "num"
                },
                {
                    title: "编辑",
                    key: "action",
                    width: 150,
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: '10px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index);
                                        }
                                    }
                                },
                                "使用"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: '10px'
                                    },
                                    on: {
                                        click: () => {
                                            this.given(params.index);
                                        }
                                    }
                                },
                                "转赠"
                            )                                   
                        ]);
                    }
                }
            ],
            data1: [
                
            ]
        };
    },
    mounted() {
        let mid = localStorage.getItem("mid");
        if (mid == 'undefined' || mid == ''){
            alert("您还没有登陆");
            this.$router.push("admin");
            return;
        }
        if (mid.indexOf('3') < 0){
            alert("您没有权限");
            return;
        }
        this.getService();
        this.addOption(); 
    },
    methods: {
        totalClick(){
            this.getService();
        },
        changePage(index){
            let start = (index - 1) * this.pageSize;
            let end = index * this.pageSize;
            this.data1 = this.historyDate.slice(start, end);
        },
        getService(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getService`,
                data: qs.stringify({})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.historyDate = response.data.data;
                        this.dataCount = this.historyDate.length;
                        if (this.historyDate.length <= this.pageSize){
                            this.data1 = this.historyDate;
                        }else{
                            this.data1 = this.historyDate.slice(0, this.pageSize);
                        }
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },  
        findOne(){
            let data = {};
            switch(this.select2){
                case "name":
                    data["id"] = "name";                   
                break;
                case "uid":
                    data["id"] = "uid";
                break;
                case "sid":
                    data["id"] = "sid";
                break;
                case "p_num":
                    data["id"] = "p_num";
                break;
            }
            data["value"] = this.search;
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getServiceByOne`,
                data: qs.stringify({id:data["id"], value:data["value"]})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.historyDate = response.data.data;
                        this.dataCount = this.historyDate.length;
                        if (this.historyDate.length <= this.pageSize){
                            this.data1 = this.historyDate;
                        }else{
                            this.data1 = this.historyDate.slice(0, this.pageSize);
                        }
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },   
        addOption(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getAllUsers`,
                data: qs.stringify({})
                }).then(response => {
                    if ((response.data.result == 200)) {
                        let length = response.data.data.length;
                        let harray = [];
                        for (let i = 0; i < length; i++){
                            harray.push(
                                {value:response.data.data[i].uid, label:response.data.data[i].name + '(' + response.data.data[i].p_num + ')'}
                            );
                        }
                        this.server = harray;
                        this.select1 = harray[0].value;
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },   
        remove(index){
            this.index = index; 
            //这个需要income里面的添加消费收益记录insertCostOrder，然后操作弹框填一下消费金额和消费信息，uid，aid都有上面获取到
            this.$Modal.confirm({
                render: (h) => {
                    return [
                    h('Input',{
                        props:{
                            value:this.des,
                            autofocus:true,
                            placeholder:'消费描述'
                        },
                        on: {
                            input: (val) => {
                                this.des = val;                              
                            }
                        }
                    }),
                    h('Input',{
                        props:{
                            value:this.num,
                            autofocus:true,
                            placeholder:'消费数量'
                        },
                        on: {
                            input: (val) => {
                                this.num = val;                              
                            }
                        }
                    })
                    ]
                },
                onOk: () => {
                    if(parseInt(this.num) > `${this.data1[this.index].num}`){
                        alert("数量超过拥有数量");
                        return;
                    }
                    let qs = require('qs');
                    this.axios({
                        method: "post",
                        url: `${this.adminUrl}/insertCostList`,
                        data: qs.stringify(
                            {sid:`${this.data1[this.index].sid}`,
                            uid:`${this.data1[this.index].uid}`,
                            des:this.des,
                            num:this.num}
                            )
                        }).then(response => {
                            if ((response.data.result == 200)) {
                                this.getService();
                                alert("消费成功");
                            }else{
                                alert("请求失败");
                            }
                        }).catch(err =>{
                            console.log(err);
                    });
                }
            })            
        },        
        given(index){
            this.index = index; 
            this.modal3 = true;    
        },
        ok(){
            if(parseInt(this.num) > `${this.data1[this.index].num}`){
                alert("数量超过拥有数量");
                this.num = '';
                this.des = '';
                return;
            }
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/insertGivenList`,
                data: qs.stringify(
                    {sid:`${this.data1[this.index].sid}`,
                    uid:`${this.data1[this.index].uid}`,
                    nextuid:this.select1,
                    des:this.des,
                    num:this.num}
                    )
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.findOne();
                        alert("转赠成功");
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });      
        },
        exportData(){
            this.$refs.table.exportCsv({
                filename: '经销商数据',
                columns:this.columns1,
                data: this.getExcel()            
            });
        },
        getExcel(){
            let data = [];
            for (let i = 0; i < this.historyDate.length; i++) {
                let json = {};
                json["name"] = this.historyDate[i].name;
                json["p_num"] = this.historyDate[i].p_num= '="'+this.historyDate[i].p_num+'"';
                json["cname"] = this.historyDate[i].cname;
                json["num"] = this.historyDate[i].num= '="'+this.historyDate[i].num+'"';                      

                data.push(json);
            }
            return data;
        }
    }
};
</script>

   



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
